<template>
  <div>
    <Card>
      <Tables ref="tables" searchable search-place="top" :loading="listLoading" :columns="columns" v-model="list">
        <template slot="handleButton">
          &nbsp;
        </template>
        <template slot="searchButton">
          <div style="float:right">
            <Input placeholder="租户名称或编码" class="search-input" v-model="listQuery.name">
            <Button @click="getList" slot="append" type="info" icon="ios-search"></Button>
            </Input>
          </div>
        </template>
        <template slot="action" slot-scope="scope">
          <div v-if="scope.row.trialStatus === 0 && scope.row.onlineStatus === 0">
            <Button v-if="appOrderManager_btn_open_trial" type="success" size="small" @click="handleTrial(scope.row)">开通试用</Button>
            <Button v-if="appOrderManager_btn_open_online" type="success" size="small" @click="handleOnline(scope.row)">开通购买</Button>
          </div>
          <div v-if="scope.row.trialStatus === 1">
            <Button v-if="appOrderManager_btn_open_trial" type="success" size="small" @click="handleTrial(scope.row)">开通试用</Button>
            <Button v-if="appOrderManager_btn_open_online" type="success" size="small" @click="handleOnline(scope.row)">开通购买</Button>
            <Button v-if="appOrderManager_btn_extension" type="success" size="small" @click="handleExtension(scope.row)">延长期限</Button>
          </div>
          <div v-if="scope.row.onlineStatus === 1">
            <Button v-if="appOrderManager_btn_open_online" type="success" size="small" @click="handleOnline(scope.row)">开通购买</Button>
            <Button v-if="appOrderManager_btn_extension" type="success" size="small" @click="handleExtension(scope.row)">延长期限</Button>
          </div>
          <div v-if="scope.row.onlineStatus === 2">
            <Button v-if="appOrderManager_btn_extension" type="success" size="small" @click="handleExtension(scope.row)">延长期限</Button>
          </div>
        </template>
      </Tables>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: left;">
          <Page v-show="!listLoading" :total="total" :page-size-opts="[50,100,500,1000,2000]" :current="listQuery.page" show-total show-sizer :page-size="listQuery.limit" @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"></Page>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { mapGetters } from 'vuex'
import { dateTimeFormatter } from '@/libs/util'
import {
  page,
  addObj,
  getObj,
  delObj,
  putObj
} from '@/api/admin/appOrder/index'
export default {
  name: 'appOrder',
  components: {
    Tables
  },
  data () {
    return {
      appOrderManager_btn_open_trial: false,
      appOrderManager_btn_open_online: false,
      appOrderManager_btn_extension: false,
      listLoading: false,
      total: 0,
      list: [],
      listQuery: {
        page: 1,
        limit: 50,
        name: undefined
      },
      columns: [
        { title: '应用名称',
          key: 'appId',
          render: (h, scope) => {
            const application = JSON.parse(scope.row.appId)
            return h(
              'div',
              application.name
            )
          }
        },
        { title: '租户名称',
          key: 'tenantId',
          render: (h, scope) => {
            const tenant = JSON.parse(scope.row.tenantId)
            return h(
              'div',
              tenant.name
            )
          }
        },
        { title: '试用状态',
          key: 'trialStatus',
          render: (h, scope) => {
            let content = '未试用'
            let color = 'primary'
            if (scope.row.trialStatus === 0) {
              content = '未试用'
              color = 'primary'
            } else if (scope.row.trialStatus === 1) {
              content = '待审批'
              color = 'primary'
            } else if (scope.row.trialStatus === 2) {
              content = '试用中'
              color = 'primary'
            } else if (scope.row.trialStatus === 3) {
              content = '试用结束'
              color = 'primary'
            }
            return h('Tag', { props: { color: color } }, content)
          }
        },
        { title: '购买状态',
          key: 'onlineStatus',
          render: (h, scope) => {
            let content = '未试用'
            let color = 'primary'
            if (scope.row.onlineStatus === 0) {
              content = '未购买'
              color = 'primary'
            } else if (scope.row.onlineStatus === 1) {
              content = '待审批'
              color = 'primary'
            } else if (scope.row.onlineStatus === 2) {
              content = '已购买'
              color = 'success'
            } else if (scope.row.onlineStatus === 3) {
              content = '冻结'
              color = 'primary'
            }
            return h('Tag', { props: { color: color } }, content)
          }
        },
        { title: '开始时间', key: 'startTime' },
        { title: '结束时间', key: 'endTime' },
        { title: '创建时间', key: 'crtTime' },
        { title: '创建人', key: 'crtUserName' },
        { title: '操作',
          key: 'action',
          align: 'center',
          render: (h, scope) => {
            return h(
              'div',
              this.$refs.tables.$scopedSlots.action(scope)
            )
          }
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  created () {
    this.getList()
    this.appOrderManager_btn_open_trial = this.elements['appOrderManager:btn_open_trial']
    this.appOrderManager_btn_open_online = this.elements['appOrderManager:btn_open_online']
    this.appOrderManager_btn_extension = this.elements['appOrderManager:btn_extension']
  },
  methods: {
    handleSizeChange (val) {
      this.listQuery.limit = val
      this.getList()
    },
    getList () {
      this.listLoading = true
      page(this.listQuery).then(res => {
        this.list = res.data.rows
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    },
    handleTrial (row) {
      console.log(row)
      let date1 = new Date()
      let endDate = new Date(date1)
      endDate.setDate(date1.getDate() + 30)
      const order = Object.assign({}, row, { trialStatus: 2, appId: row.appId.id, tenantId: row.tenantId.id, startTime: dateTimeFormatter(new Date(), 'yyyy-MM-dd hh:mm:ss'), endTime: dateTimeFormatter(endDate, 'yyyy-MM-dd hh:mm:ss') })
      putObj(row.id, order).then(response => {
        this.$Notice.success({
          title: '试用审批成功',
          desc: '创建成功'
        })
        this.getList()
      })
    },
    handleOnline () {
      const order = Object.assign({}, row, { onlineStatus: 2, appId: row.appId.id, tenantId: row.tenantId.id })
      putObj(row.id, order).then(response => {
        this.$Notice.success({
          title: '试用审批成功',
          desc: '创建成功'
        })
        this.getList()
      })
    },
    handleExtension () {
    }
  }
}
</script>
